import React, { useEffect } from 'react';
import './index.less';

import { useSelector, useDispatch } from 'react-redux';

export default function StatusBar() {
  const bgColor = useSelector((state: DefaultRedux) => state.statusBarBackgroundColor);
  let times = 0;
  const getStatus = () => {
    try {
      if (plus) {
        // console.log('导航栏');
        const _height: number = plus.navigator.getStatusbarHeight();
        const _bar: HTMLElement | null = document.getElementById('statusBar');
        if (_bar) {
          _bar.style.height = _height * window.devicePixelRatio + 'px';
          console.log(0, _height, _bar, _bar.style.height);
        }
      } else {
        // console.log(123, times);
        times += 1;
        if (times < 50) {
          setTimeout(() => {
            getStatus();
          }, 20);
        }
      }
    } catch (error) {
      // console.log(121233, times);
      times += 1;
      if (times < 50) {
        setTimeout(() => {
          getStatus();
        }, 20);
      }
    }
  };
  useEffect(() => {
    setTimeout(() => {
      getStatus();
    }, 20);
  }, []);
  return <div id="statusBar" className="status-bar" style={{ background: bgColor }}></div>;
}
